<h2>Groups &amp; paths</h2>
<div class="contents">
<div class="sub2">Tuturial <i>i</i>Scr<i>i</i>ptDes<i>i</i>gn </div>
<div class="sub">Groups</div>
You have seen the first example of an SVG element: the line. There are many other elements like rectangles, ellipse, circles. I recommend the primer once more
to you, to learn more about those Elements. Of course you're also encouraged to experiment in your 'sandbox'. This tutorial won't spend any more time on those elements.
In stead we'll focus on groups. A group is a collections of elements. Imagine you have a very simple SVG drawing of a house: one rectangle and on the top two diagonal 
lines representing the roof. Treating those objects as one group has a few advantages: you can reuse the group, so drawing a street will be a peace of cake, or you 
can transform the house with one of the fancy transformations SVG offers you, like turning the house upside down, or shrinking it to a midget house.
Hopefully you've been convinced about the necessity of groups so now the question remains how do we create a group in a svg file? The answer is with a group element. See the code below:
<pre>
&lt;g id="house" fill="none" stroke-width="2" stroke="black">
   &lt;rect x="10" y="100" width="100" height="100"/>
   &lt;line x1="10" y1="100" x2="60" y2="10"/>
   &lt;line x1="110" y1="100" x2="60" y2="10"/>
&lt;/g>
NB This example is not in the graph.
</pre>
The start of the group is denoted with the &lt;g, it's called an open tag or start tag. The group has 3 elements: 1 box and 2 lines. The end of the group is denoted with the &lt/g&gt; A so called end tag. This is a typical
xml way of writing. The end of a collection elements is always declared by a matching end tag. I called a group a collection of elements but unfortunately that is rubbish in xml terms. XML does not 
distinguish in elements containing other elements or empty elements. A rectangle is also an element but without any other child elements.
You don't see a matching &lt;/rect&gt; close tag, but if you look careful the last character before the &gt; is a /. And that is a short way of writing an end
tag for an element that does not hold any other elements.
And the SVG tag you may have seen in previous page's template, is also an element with a corresponding end tag.<br/>
To go short: An element must have a start tag and end tag. However the end tag may be omitted if the element has zero children and the start tag ends with '/&gt;' instead of '&gt; <br/>
For a group it is allowed to have groups as children you can have nested groups, however all these groups must have closing end tags. And the end of an enclosed group is often also the end of the parent's group
so it's natural to see
<PRE>
       &lt;/g>
   &lt;/g>
&lt;/g>
</PRE>
Hopefully the indentation will tell you which open tag will match which close tag, but you can't rely on in it, and sometimes it's quite a challenge to find
the matching tags. However a browser will exactly know what too match, which maybe mismatch to your assumption. Mismatched tags is a common reason for errors and mistakes.
HTML is forgiving about misplace open and end tagsSVG is <b>NOT</b><br/>
Another term worth mentioning is the attribute: An attribute is an extra piece of information we want to give to an element. x1="10". Will assign the value 10 
to the attribute x1. You're not free to choose the name of the parameters yourself, how can the browser guess what you mean otherwise? So the name of the attributes
is defined by the SVG specification. Attributes can be mandatory or optional, and can have values which are free-text (an id) Numeric (x and y) or predefined text.
If you take a look at the spec you'll see examples of all the different type of attributes.
<a class="reference" href="http://en.wikipedia.org/wiki/XML">wikipedia xml</a>
<div class="sub">Paths</div>
A path can replace all the elements we've seen above (rect, line, ellipse etc) and can do more. Much more! Think of the path as a way to directly communicate with a pencil:
Move to position (x,y). draw a line to another position (x1,y1), draw a half circle to point (x2,y2). Move (without drawing) to a next location.
How does that look like? Have a look a the template and take a look at the d-attributes of the different paths in the <a class="template" href="paths.jsvg">paths</a>
You'll see a myriad of the characters (m, M, l, L, C, c etc) together with numeric values.<br/>
An important thing to remember is the capitalization: A capital indicates an absolute position, a lower case denotes a relative position.
So "M 100 200" should be translated by "move to position 100, 200" (it's a good practice to start all you paths with an absolute position). On the other hand "l 20 5"
is translated with draw a direct line from the current position to 20 units alongside the x-axis and 5 units alongside the y-axis.<br/>
You'll also note that it's quite common to have more than 2 numbers after a movement character, this is not for some hidden dimensions, but is just a short way to repeat the
last movement character (l 20 20 l 30 20 becomes l 20 20 30 20). The z is a character you'll see often at the end it's for connecting the last point with the first point to 
finish the polygon<br/>
Apart from the obvious M and L there are other letters which are linebending. The q (Quadratic B&eacute;zier curves), c (Cubic B&eacute;zier curves) an a (elliptical arcs). 
For now we'll only focus on the Cubic B&eacute;zier curves (cbc). A cbc is defined by a "c" or "C", (we go for the lowercase c which will make all our points 
relative to the location of the start point) followed by 3 point pairs (6 numbers in total). Take a look a the blue line in the graph behind this text.
It starts at the blue point, which is not part of the cbc but is used to position the pen at the right location. The first two point pairs are the end points for the
tangent lines of the end points, relative to the start (blue) point. (you may want to read this text a few times, also if you start to play with the graph behind this text
and experiment with different
parameters you may get a better and faster understanding than continuing reading this text.) The length of the tangent lines will indicate
how hard the tangent lines are "pulling" at the curve to bend it in a certain direction. The last pair is the actual endpoint of your curve, again relative to the
star point. <br/>
If you haven't much experience with these kind of drawings I'm sure it's mind bending. For me after using it quite extensively for more than half a year i'm still making
errors and mistakes. Start small and don't be afraid for errors. That's all what I can say to comfort you.
</div>
